<template>
	<view class="pp">
		<!-- <wd-swiper :list="swiperList" autoplay :current="0"></wd-swiper> -->

		<view class="card">
			<view class="card-title">
				门店功能
			</view>
			<wd-grid clickable square custom-class="mtp bg-white" :column="4">
				<wd-grid-item link-type="navigateTo" v-for="(item , index) in primary_list" @click="click(item)"
					@itemclick="click(item)" :url="item.url" icon-size="60rpx" use-icon-slot :key="index"
					:text="item.title">
					<template #icon>
						<image class="slot-img" :src="item.icon" />
					</template>
				</wd-grid-item>
				<wd-grid-item link-type="navigateTo"  @itemclick="click" :url="notice.url"
					icon-size="60rpx" :value="notice.bridge.value" :max="notice.bridge.max" use-icon-slot :key="index"
					:text="notice.title">
					<template #icon>
						<image class="slot-img" :src="notice.icon" />
					</template>
				</wd-grid-item>
			</wd-grid>
		</view>
		<view class="card">
			<view class="card-title">
				个人功能
			</view>
			<wd-grid square clickable custom-class="mtp bg-white" :column="4">
				<wd-grid-item v-for="(item , index) in user_list" link-type="navigateTo" @click="click(item)"
					@itemclick="click(item)" :url="item.url" icon-size="60rpx" use-icon-slot :key="index"
					:text="item.title">
					<template #icon>
						<image class="slot-img" :src="item.icon" />
					</template>
				</wd-grid-item>
			</wd-grid>
		</view>
	</view>
</template>
<script setup>
	import {
		computed,
		ref
	} from 'vue';
	import userApiService from "@/api/user.js"
	import apiService from "@/api/server.js"
	import {
		onLoad,
		onShow,
		onPullDownRefresh
	} from '@dcloudio/uni-app'

	const noticeTotal = ref(0)
	const swiperList = ref([])

	onLoad(() => {
		apiService.getHome().then(res => {
			let list = []
			res.banner.map(item => {
				list.push(item.image)
			})
			swiperList.value = list

		})
	})

	onShow(() => {
		userApiService.getAnnountCement().then(res => {
			noticeTotal.value = res.anntMsgTotal
		})
	})

	const primary_list = [{
			title: "租赁申请",
			// icon: "http://t.tbx-tec.cn/cdn/yunhangguanli.svg",
			icon: "/static/icon/icon_zusq.png",
			url: "/pages/mine/ApplyShebei"
		},
		{
			title: "租赁列表",
			// icon: "http://t.tbx-tec.cn/cdn/yunhangguanli.svg",
			icon: "/static/icon/icon_zllb.png",
			url: "/pages/mine/Applylist"
		},
		{
			title: "设备报修",
			// icon: "http://t.tbx-tec.cn/cdn/gengxinjihua.svg",
			icon: "/static/icon/yone.png",
			url: "/pages/maintenance/index"
		},
		{
			title: "会员管理",
			// icon: "http://t.tbx-tec.cn/cdn/tongjijilu.svg",
			icon: "/static/icon/ytwo.png",
			url: "/pages/user/index"
		},
		{
			title: "商户",
			// icon: "http://t.tbx-tec.cn/cdn/yunhangguanli.svg",
			icon: "/static/icon/ythree.png",
			url: "/pages/form/shop"
		},
		{
			title: "门店",
			// icon: "http://t.tbx-tec.cn/cdn/yunhangguanli.svg",
			icon: "/static/icon/yfour.png",
			url: "/pages/form/stores"
		},
		{
			title: "设备",
			// icon: "http://t.tbx-tec.cn/cdn/yunhangguanli.svg",
			icon: "/static/icon/yfive.png",
			url: "/pages/form/equipment"
		},
		{
			title: "设备运行记录",
			// icon: "http://t.tbx-tec.cn/cdn/yunhangguanli.svg",
			icon: "/static/icon/ysix.png",
			url: "/pages/form/equipment"
		}
	]

	const notice = computed(() => {
		return {
			title: "通知公告",
			// icon: "http://t.tbx-tec.cn/cdn/yunhangguanli.svg",
			icon: "/static/icon/yseven.png",
			url: "/pages/notice/list",
			bridge: {
				value: noticeTotal.value,
				max: 10,
			}
		}
	})

	const user_list = [{
			title: "培训管理",
			// icon: "http://t.tbx-tec.cn/cdn/zhengmingziliaoshuomingshu.svg",
			icon: "/static/icon/pone.png",
			url: "https://ms.tbx-tec.cn/?name=test"
		},
		{
			title: "门店进货",
			// icon: "http://t.tbx-tec.cn/cdn/baoyangguanli.svg",
			icon: "/static/icon/ptwo.png",
			url: "/pages/shop/index"
		},
		{
			title: "地址管理",
			// icon: "http://t.tbx-tec.cn/cdn/yunhangguanli.svg",
			icon: "/static/icon/pthree.png",
			url: "/pages/user/address"
		},
		{
			title: "日报",
			// icon: "http://t.tbx-tec.cn/cdn/yunhangguanli.svg",
			icon: "/static/icon/pfour.png",
			url: "/pages/form/daily"
		},
		{
			title: "拜访",
			// icon: "http://t.tbx-tec.cn/cdn/yunhangguanli.svg",
			icon: "/static/icon/pfive.png",
			url: "/pages/form/visit"
		},
	]

	const click = (e) => {
		if (e.url === "") {
			return uni.showToast({
				title: "功能尚未开放，请耐心等待",
				icon: 'none'
			})
		}
		if (e.url.slice(0, 4) == "http") {
			uni.navigateTo({
				url: `/pages/index/webview?url=${encodeURIComponent(e.url)}`
			})
			return
		}

		uni.navigateTo({
			url: e.url
		})
	}
</script>

<style lang="scss" scoped>
	.bg-white {
		background-color: #fff;
	}

	.card {
		margin-top: 20rpx;
		padding: 20rpx;

		&-title {
			font-size: 42rpx;
			font-weight: 600;
		}

		&-box {
			display: grid;
			grid-template-columns: 4fr;
			grid-gap: 26px 30px;
			justify-items: center;
			color: #666;

			&-item {}
		}

		.slot-img {
			width: 60rpx;
			height: 60rpx;
		}
	}
</style>